<!--
 * @Descripttion : 
 * @Autor        : Lilong
 * @Date         : 2022-10-08 16:07:07
 * @LastEditTime : 2022-10-09 12:26:52
 * @FilePath     : \vue3.2.31-case\响应式基础\响应式工具函数\isRef\App.vue
-->
<script setup lang="ts">
import { customRef, isRef, ref, shallowRef } from 'vue'

const refNum = ref(0)
const shallowRefObj = shallowRef({
  a: "a", 
  b: {
    c: "c"
  }
});
const myRef = (value: any) => {
  let timer: any
  return customRef((track, trigger) => {
    return {
      get(){
        track(); // 告诉Vue这个数据是需要追踪变化的
        console.log('get', value);
        return value;
      },
      set(newValue){
        clearTimeout(timer)
        timer = setTimeout(() => {
          console.log('set', newValue);
          // 调接口 做防抖
          value = newValue;
          trigger();  // 告诉Vue触发界面更新
        }, 500)
      }
    }
  })
}

const age = myRef(18)

console.log('是否是ref对象', isRef(refNum)) //true
console.log('是否是ref对象', isRef(shallowRefObj)) //true
console.log('是否是ref对象', isRef(age)) //true
</script>

<template>
  <h3>isRef</h3>
  <h5>
    作用：判断是否是由ref、shallowRef、customRef创建的ref对象
  </h5>
  <h5>
    注意：<br>
  </h5>
</template>

<style scoped>
ul,li{
  list-style: none;
}
</style>
